<template>
  <el-form-item :label="label">
    <div class="add-table">
      <el-button class="mb10" size="mini" type="primary" @click="addPrecautions('consumablesArr')">新
        增</el-button>
      <el-table :data="consumablesTable" stripe highlight-current-row border ref="addPrecautionsRef">
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column align="center" v-for="(item, index) in consumablesArr" :prop="item.code" :label="item.name"
          :key="index">
          <template slot-scope="scope">
            <div v-if="item.code == 'price'">
              <el-input type="number" style="width: 100%;" v-model="scope.row[item.code]"></el-input>
            </div>
            <div v-else>
              <el-input style="width: 100%;" v-model="scope.row[item.code]"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" icon="el-icon-delete"
              @click="handleDeleteRow(scope.$index, consumablesTable)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      tableDataPre: [],
      consumablesTable: [],
      consumablesArr: [
        { name: "服务名称", code: "name" },
        { name: "价格", code: "price" },
      ],
    }
  },
  props: ['label', 'getValPrice'],
  methods: {
    addPrecautions() {
      var addObj = {
        name: "",
        price: " ",
      };
      this.consumablesTable.push(addObj);
    },

    handleDeleteRow(index, rows) {
      rows.splice(index, 1);
    },

  },
  watch: {
    consumablesTable: {
      deep: true,
      immediate: true,
      handler(val, oldval) {
        if (val) {
          this.$emit('getVal', val)
        }

      }
    },
    getValPrice: {
      deep: true,
      immediate: true,
      handler(val, oldVal) {
        this.consumablesTable = val
      }
    }
  }
}
</script>

<style>
</style>